<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>  
  <title>购买会员</title>
</head>
<style>
  [v-cloak] {
    display: none;
  }
</style>

<body>
  <div id="body" style="height: 100%" v-cloak>
    <view-box ref="viewBox" body-padding-bottom="55px">
      <!--<myhead slot="header" title="购买会员" :showsearch=true style="position:fixed;width: 100%;z-index:1"></myhead>-->

      <div class="content">
        <div >
          <sticky  ref="sticky" style='position:static' :check-sticky-support="false">
            <tab :line-width="1">
              <tab-item selected @click.native="show(0)">会员</span>
              </tab-item>
              <!-- <tab-item @click.native="show(1)">课程</tab-item> -->
            </tab>
          </sticky>
        </div>

        <div>
          <transition :name="transitionName">
            <div v-show="listIndex==0" class="list">
                <div v-if='isExpired==0&&deposit<=0' style="text-align:center;margin-top:25vh;marignt-bottom:10vh;padding-left:10px;padding-right:10px;">
                  <p style="font-size:12px">您的会员还没有过期，请重新补交押金99元继续使用</p>
                  <x-button @click.native="pay" type="primary">补交押金</x-button>                  
                </div>
              <ul>
                <li v-if='!(isExpired==0&&deposit<=0)' v-for='(item,index) in vipList' class="clearfix">
                    <Mybuy :data='item'></Mybuy> 
                </li>
              </ul>
              </flexbox>
            </div>
          </transition>
        </div>

        <div>
          <transition :name="transitionName">
            <div v-show="listIndex==1" class="bookList">
              <flexbox wrap="wrap" :gutter="0" align="flex-start">
                <flexbox-item :span="1/3">
                  <div class="book">
                    <div>
                      <div>
                        <img src="/static/book.jpg" alt="">
                      </div>
                      <div class="detail">
                        <p class="title">2画报2017年大撒</p>
                        <p class="author">作者:金波</p>

                      </div>
                    </div>
                  </div>
                </flexbox-item>

                <flexbox-item :span="1/3">
                  <div class="book">
                    <div>
                      <div>
                        <img src="/static/book.jpg" alt="">
                      </div>
                      <div class="detail">
                        <p class="title">婴儿画报2017年大撒</p>
                        <p class="author">作者:金波</p>

                      </div>
                    </div>
                  </div>
                </flexbox-item>

                <flexbox-item :span="1/3">
                  <div class="book">
                    <div>
                      <div>
                        <img src="/static/book.jpg" alt="">
                      </div>
                      <div class="detail">
                        <p class="title">婴儿画报2017年大撒</p>
                        <p class="author">作者:金波</p>

                      </div>
                    </div>
                  </div>
                </flexbox-item>

                <flexbox-item :span="1/3">
                  <div class="book">
                    <div>
                      <div>
                        <img src="/static/book.jpg" alt="">
                      </div>
                      <div class="detail">
                        <p class="title">婴儿画报2017年大撒</p>
                        <p class="author">作者:金波</p>

                      </div>
                    </div>
                  </div>
                </flexbox-item>

                <flexbox-item :span="1/3">
                  <div class="book">
                    <div>
                      <div>
                        <img src="/static/book.jpg" alt="">
                      </div>
                      <div class="detail">
                        <p class="title">婴儿画报2017年大撒</p>
                        <p class="author">作者:金波</p>

                      </div>
                    </div>
                  </div>
                </flexbox-item>

                <flexbox-item :span="1/3">
                  <div class="book">
                    <div>
                      <div>
                        <img src="/static/book.jpg" alt="">
                      </div>
                      <div class="detail">
                        <p class="title">婴儿画报2017年大撒</p>
                        <p class="author">作者:金波</p>
                      </div>
                    </div>
                  </div>
                </flexbox-item>


              </flexbox>
            </div>
          </transition>
        </div>


      </div>

  

    </view-box>
    <foot :index="1"></foot>

  </div>

</body>

</html>